<template>
    <div class="user-box">
        <el-form :inline="true" :model="searchData" class="search-form">
            <el-form-item label="用户名" prop="nickName">
                <el-input
                    class="w192"
                    v-model="searchData.nickName"
                    placeholder="请输入用户名"
                ></el-input>
            </el-form-item>
            <el-form-item label="角色" prop="roleId">
                <el-select
                    class="w192"
                    v-model="searchData.roleId"
                    placeholder="请选择角色"
                    size="large"
                >
                    <el-option label="全部" :value="0"></el-option>
                    <el-option
                        v-for="item in roleWithAuthList"
                        :key="item.roleId"
                        :value="item.roleId"
                        :label="item.roleName"
                    ></el-option>
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="handleSearch">搜索</el-button>
            </el-form-item>
        </el-form>
        <el-table :data="tableData" border stripe>
            <el-table-column
                prop="id"
                label="No."
                :min-width="180"
            ></el-table-column>
            <el-table-column
                prop="nickName"
                label="昵称"
                :min-width="180"
            ></el-table-column>
            <el-table-column
                prop="userName"
                label="用户名"
                :min-width="180"
            ></el-table-column>
            <el-table-column label="角色" :min-width="180">
                <template #default="{ row }">
                    <el-button
                        v-for="role in row.roles"
                        :key="role"
                        size="small"
                        type="primary"
                    >
                        {{ role.roleName }}
                    </el-button>
                </template>
            </el-table-column>
            <el-table-column label="操作" :min-width="180">
                <template #default="{ row }">
                    <el-button
                        size="small"
                        type="primary"
                        @click="handleEditUser(row)"
                        >编辑</el-button
                    >
                </template>
            </el-table-column>
        </el-table>
        <el-dialog title="编辑用户信息" v-model="editShow">
            <el-form :model="editUser" label-position="top" label-width="120px">
                <el-form-item label="用户名">
                    <el-input
                        v-model="editUser.nickName"
                        autocomplete="off"
                    ></el-input>
                </el-form-item>
                <el-form-item label="角色">
                    <el-select
                        v-model="editUser.roles"
                        multiple
                        placeholder="请选择角色"
                        size="large"
                    >
                        <el-option
                            v-for="item in roleWithAuthList"
                            :key="item.roleId"
                            :value="item"
                            :label="item.roleName"
                        ></el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="editShow = false">取消</el-button>
                    <el-button type="primary">确认</el-button>
                </span>
            </template>
        </el-dialog>
    </div>
</template>
<script setup lang="ts">
import { UserInfo } from '@/api/user/types';
import { IRoleWithAuth } from '@/api/role/types';
import { userList } from '@/api/user/index';
import { roleList } from '@/api/role/index';
defineOptions({
    name: 'User',
});
const tableData = ref<UserInfo[]>([]);
interface IQueryUser {
    nickName: string;
    roleId: number;
}
const searchData = reactive<IQueryUser>({
    nickName: '',
    roleId: 0,
});
const roleWithAuthList = ref<IRoleWithAuth[]>([]);
const listUser = () => {
    userList().then((res) => {
        tableData.value = res.data;
    });
};
const listRole = () => {
    roleList().then((res) => {
        roleWithAuthList.value = res.data;
    });
};
// edit
const editShow = ref<boolean>(false);
const editUser = ref<UserInfo>({
    id: 0,
    nickName: '',
    userName: '',
    roles: [],
});
const handleEditUser = (row: UserInfo) => {
    editShow.value = true;
    editUser.value = {
        ...row,
        roles: row.roles,
    };
};
// edit
onMounted(() => {
    listUser();
    listRole();
});
const handleSearch = () => {};
</script>
<style scoped lang="less">
.search-form {
    padding: 10px 0 0 10px;
}
.w192 {
    width: 192px;
}
</style>
